<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>代码生成工具</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=1200"/>
    <link rel="icon" th:href="@{/img/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/css/element-ui.css}">
    <style>
        #app {
            line-height: 30px;
            margin: 100px auto;
            width: 400px;
            text-align: center;
        }

        #app button {
            width: 100%;
            margin: 10px auto;
        }

        body{
            background-color:#224b8f;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="mydiv" class="login-container">
        <h2 style="text-align: center;color:white;">工具</h2>
        <br>
        <br>
        <el-form ref="form" :model="form" label-width="0px">
            <el-form-item>
                <el-input pl v-model="form.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="password" v-model="form.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
            <el-form-item>
                <label style="font-weight: bold;color:white;">author: xxx</label>
            </el-form-item>
        </el-form>
    </div>
</div>

<script th:src="@{/js/util/jquery.js}"></script>
<script th:src="@{/js/util/vue.js}"></script>
<script th:src="@{/js/util/vue-resource.js}"></script>
<script th:src="@{/js/util/element-ui.js}"></script>
<script th:src="@{/js/util/util-core.js}"></script>
<script th:src="@{/js/util/canvas-particle.js}"></script>


<script th:inline="javascript">
    $UC = {
        ctxPath: /*[[${#httpServletRequest.getContextPath()}]]*/ null,
        ctxStatic: /*[[${#httpServletRequest.getContextPath()}]]*/ null
    };
</script>

<script>
    var data = {
        form: {
            username:'admin',
            password:'admin'
        }
    };
    new Vue({
        el: '#app',
        data: data,
        methods: {
            onSubmit: function () {
                var _this = this;
                console.log(_this.form)
                $UU.http.post("/login", {"username":_this.form.username,"password":_this.form.password}, function (data) {
                        //获取回调数据
                        if (data) {
                            _this.$message.success("登录成功");
                            top.location.href = $UC.ctxPath + "/index";
                        }else{
                            _this.$message.success("用户名密码错误");
                        }

                    }
                );
            },
            logout: function () {
                location.href = $UC.ctxPath + "/logout";
            }
        }

    });

</script>
<script th:inline="javascript">
    window.onload = function() {
        //配置
        var config = {
            vx: 4,	//小球x轴速度,正为右，负为左
            vy: 4,	//小球y轴速度
            height: 2,	//小球高宽，其实为正方形，所以不宜太大
            width: 2,
            count: 200,		//点个数
            color: "121, 162, 185", 	//点颜色
            stroke: "130,255,255", 		//线条颜色
            dist: 6000, 	//点吸附距离
            e_dist: 20000, 	//鼠标吸附加速距离
            max_conn: 10 	//点到点最大连接数
        }

        //调用
        CanvasParticle(config);
    }
</script>
</body>

</html>
